
import * as echarts from "echarts";
const tipMessages = ["XXXXXXXX号机", "XXXXXXXX号机", "XXXXXXXX号机", "XXXXXXXX号机", "XXXXXXXX号机"];

const getTipMessage = (params) => {
    return tipMessages[params[0].dataIndex];
};

function initTipMessage(partLifeInfos) {
    for (let index = 0; index < 5 && index < partLifeInfos.length; index++) {
        const partLifeInfo = partLifeInfos[index];
        tipMessages[index] = partLifeInfo.name;
    }
}

/* eslint-disable */
function createTitleNames(partLifeInfos) {
    const titlenames = ["xxxxx", "xxxxx", "xxxxx", "xxxxx", "xxxxx"];
    const regex = /^[0-9]{1,3}/

    for (let index = 0; index < 5 && index < partLifeInfos.length; index++) {
        const partLifeInfo = partLifeInfos[index];
        // const partNumber = partLifeInfo.name.match(regex)[0]
        titlenames[index] = partLifeInfo.name;
    }

    return titlenames;
}

function createLifeValues(partLifeInfos) {
    const lifeValues = ["xxx", "xxx", "xxx", "xxx", "xxx"];

    for (let index = 0; index < 5 && index < partLifeInfos.length; index++) {
        const partLifeInfo = partLifeInfos[index];
        lifeValues[index] = partLifeInfo.life.toString();
    }

    return lifeValues;
}

// 创建寿命比例
function createLifeRates(partLifeInfos) {
    const lifeValues = [100, 100, 100, 100, 100];

    for (let index = 0; index < 5 && index < partLifeInfos.length; index++) {
        const partLifeInfo = partLifeInfos[index];
        const value = Math.floor(partLifeInfo.currentLife / partLifeInfo.life * 100);
        lifeValues[index] = (value > 100) ? 100 : value;
    }

    return lifeValues;
}

export function createLifeProgressChart(partLifeInfos, isPulpingMachine) {

    initTipMessage(partLifeInfos);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("chart_4"));
    // 寿命进度百分比
    // var data = [20, 34, 60, 78, 69];
    var data = createLifeRates(partLifeInfos);
    // var titlename = ["1xxxx", "2号机", "3号机", "xxxxx", "xxxxx"];
    var titlename = createTitleNames(partLifeInfos);
    // 寿命当前值
    // var valdata = [702, 406, 664, 79, 505];
    var valdata = createLifeValues(partLifeInfos);
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    const option = {
        tooltip: {
            trigger: "axis",
            formatter: getTipMessage,
        },
        title: {
            text: "部件使用寿命",
            x: "center",
            textStyle: {
                color: "#FFF",
                fontSize: 18,
            },
            left: "4%",
            top: "10%",
        },
        //图标位置
        grid: {
            top: "20%",
            left: "28%",
            right: "20%"
        },
        xAxis: {
            show: false,
        },
        yAxis: [
            {
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: "#fff",
                    fontSize: 14,
                    formatter: (value, index) => {
                        if (value.length > 4)
                            value = value.substring(0, 4) + '...';
                        return [`{lg|${index + 1}}  ` + "{title|" + value + "} "].join(
                            "\n"
                        );
                    },
                    rich: {
                        lg: {
                            backgroundColor: "#339911",
                            color: "#fff",
                            borderRadius: 16,
                            // padding: 5,
                            align: "center",
                            width: 16,
                            height: 16,
                        },
                    },
                },
            },
            {
                show: true,
                inverse: true,
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 14,
                        color: "#fff",
                    },
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function (params) {
                            var num = myColor.length;
                            return myColor[params.dataIndex % num];
                        },
                    },
                },

                textStyle: {
                    fontSize: 14
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barGap: "-100%",
                data: [100, 100, 100, 100, 100],
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 3,
                        barBorderRadius: 15,
                    },
                },
                label: {
                    show: true,
                    position: "inside",
                    formatter: (arg) => {
                        return data[arg.dataIndex] + "%";
                    }
                },
                textStyle: {
                    fontSize: 14
                }
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart.on("click", (context) => {
        const partInfo = partLifeInfos[context.dataIndex];

        if (context.seriesType === 'bar') {
            if (isPulpingMachine) {
                window.location.href =
                    "/cardboards/pulping?"
                    + "deviceId=" + encodeURIComponent(partInfo.deviceId);
            }
            else {
                window.location.href =
                    "/cardboards/mixing?"
                    + "deviceId=" + encodeURIComponent(partInfo.deviceId);
            }
        }
    });
}
